<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高考成绩柱状图</title>
    <script src="../../js/jquery-1.4.2.js"></script>
    <script src="../../js/echarts.min.js"></script>
</head>
<body>
    <div id="main0" style="height: 400px;width: 600px"></div>
    <div id="main1" style="height: 400px;width: 600px;"></div>
    <div id="main2" style="height: 400px;width: 600px"></div>
    <div id="main3" style="height: 400px;width: 600px"></div>
</body>
<script>
    var myChart3 = echarts.init(document.getElementById("main3"))
    var option3={
        title:{
            text:"高考成绩"
        },
        legend:{
            orient: 'vertical',
            left:"right"
        },
        tooltip:{},
        xAxis:{
            type:"value"
        },
         yAxis:{
            type:"category",
            data:["语文","数学","英语","理综"],
        },
        series:[{
            name:'1',
            type:'bar',
            data:[118,132,66,251]
        },
            {   name:'2',
                type:"bar",
                data:[114,123,88,220]
            }
        ]
    }
    myChart3.setOption(option3)




    //1.创建echarts实例并初始化
    var myChart = echarts.init(document.getElementById("main0"))
    //2.配置option
    var option={
        title:{
            text:"高考成绩",
        },
        tooltip: {},
        legend: {
            orient: 'vertical',
            left:"right"
            },
        xAxis: {
            type:"category", /*类目*/
            data:["语文","数学","英语","理综"],
        },
        yAxis: {
            type:"value", /*数值*/
        },
        series: [
            {
                type:'bar',
                name:'成绩',
                data: [118,132,66,251],
                itemStyle: {
                borderColor: "yellow",
                color: "red"
            }},{
                name:"折线成绩",
                type:"line",
                data: [118,132,66,251],
            }
        ]
    }
    //3.将Option添加到Echarts实例中
    myChart.setOption(option)




    var myChart1=echarts.init(document.getElementById("main1"))
    var Option1={
        title: {
            name: "天气温度"
        },
        tooltip: {},
        legend: {
            orient: 'vertical'
            },
        xAxis: {
            type:"category",
            data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
        },
        yAxis: {
            type:'value',
            name:'温度(°C)',
        },
        series: [
            {
                type:'line',
                name:'温度',
                data:[22,29,32,29,29,31,32],
                itemStyle: {
                borderColor: "red",
                color: "yellow"
        }}
        ]
    }
    myChart1.setOption(Option1)


    var myChart2=echarts.init(document.getElementById("main2"))
    var Option2={
          title: {
            text: '成绩',
            subtext: '李',
            left: 'center'
          },
          tooltip: {
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '科目',
              type: 'pie',
              radius: ['10%','60%'], //内外圈大小
                roseType: 'radius',  //加上后变南丁格尔图
              data: [
                { value: 118, name: '语文' },
                { value: 135, name: '数学' },
                { value: 88 ,name: '英语' }
              ],
            }
          ]
        };
    myChart2.setOption(Option2)
</script>
</html>